<template>
  <view class="item" @tap="$xyfun.to('/pages/news/detail?id='+item.id)">
    <view class="content" >
      <view class="title">{{item.name}}</view>
      <p class="desc">{{item.content}}</p>
      <view class="teacher" v-if="item.teacher_id">辅导老师：{{item.teacher.nickname}} <span v-for="val in $xyfun.tagsSplit(item.teacher.tags)" v-if="item.teacher.tags">{{val}}</span></view>
      <view class="pubtime">发布时间丨{{$xyfun.timeFormat(item.createtime,'yyyy-mm-dd')}}</view>
    </view>

    <view class="base">
      <view class="thumb">
        <image class="image2" mode="aspectFill" :src="$xyfun.image(item.image)"></image>
      </view>
      <view class="tool">
        <view class="yz-iconfont yz-xiaoxi"></view>
        <text>{{item.comment_nums}}</text>
        <view class="yz-iconfont yz-dianzan"></view>
        <text>{{item.like_nums}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "newsRow",
  props: {
    item: {
      type: Object,
    }
  }
}
</script>

<style lang="scss">
.item{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 10rpx;
  margin: 20rpx 30rpx;
  padding:20rpx 20rpx;
  box-shadow: 3rpx 8rpx 10rpx #ececec;
  .content{
    margin-left: 10rpx;
    padding-top: 10rpx;
    .title{
      font-weight: bold;
    }

    .desc{
      font-size: 22rpx;
      color: #aeaeae;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 显示最多 2 行 */
      -webkit-box-orient: vertical; /* 设置排列方式为纵向 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 溢出部分显示省略号 */
      padding-top: 10rpx;
      margin-bottom: 15rpx;
    }
    .teacher{
      font-size: 22rpx;
      color:#aeaeae;
      font-weight: bold;
      display: flex;
      align-items: center;
      span{
        color: $uni-color-primary;
        border: 2rpx solid $uni-color-primary;
        margin-left:6rpx;
        padding-left: 6rpx;
        padding-right: 6rpx;
        border-radius: 10rpx;
        font-size: 18rpx;
        white-space: nowrap;
        display: inline-block;
        height: 25rpx;
        line-height: 25rpx;
        &:first-child{
          margin-left:20rpx;
        }
      }
    }
    .pubtime{
      color:#aeaeae;
      margin-top: 20rpx;
      font-size:22rpx;
    }
  }

  .base{
    margin-left: 50rpx;
    .thumb{
      image{
        width: 170rpx;
        height: 170rpx;
        border-radius: 14rpx;
        margin-top: 0;
      }
    }

    .tool{
      display: flex;
      justify-content: flex-end;
      view{
        margin-top: 25rpx;
        font-size: 30rpx;
        margin-right: 6rpx;
        &:nth-of-type(2){
          margin-left: 20rpx;
        }
      }
      text{
        margin-top: 25rpx;
        color: #bababa;
        margin-right: 10rpx;
        font-size: 20rpx;
      }
    }
  }
}
</style>
